<nz-card   [nzTitle]="cardTitle" [nzExtra]="extraTemplate">
  <nz-table #basicTable [nzData]="pl">
    <thead>
    <tr>
      <th>产品名称</th>
      <th>出库数量</th>
      <th>出库时间</th>
      <th>出库方向</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of basicTable.data">
      <td>{{data.proid}}</td>
      <td>{{data.outnum}}</td>
      <td>{{data.outdate}}</td>
      <td>{{data.direction}}</td>
      <td>
        <button nz-button nzType="primary" (click)="update(data.prodoutboundid)">修改</button>
        <button nz-button nzType="danger" (click)="delete(data.prodoutboundid)">删除</button>
      </td>
    </tr>
    </tbody>
  </nz-table>

</nz-card>
<ng-template #extraTemplate>
  <button nz-button nzType="primary" (click)="add()">新增</button>
</ng-template>
<ng-template #cardTitle>

  <nz-row [nzGutter]="16">


    <nz-col *ngFor="let s of kl">
      <nz-statistic  [nzValue]="s.prototalnum" [nzTitle]="s.proid" [nzSuffix]="'包'" ></nz-statistic>
    </nz-col>


  </nz-row>

</ng-template>
